<!-- 库存盘点 -->
 <template>
   <div>

      <el-input v-model="id"/>
      <el-radio v-model="channel" label=1>支付宝</el-radio>
      <el-radio v-model="channel" label=2>微信</el-radio>
      <el-button @click="makeQRCode">生成二维码</el-button>
      <div ref="qrcode" class="QRimg">
         <!-- <img class="QRimg" :src="Url" /> -->
      </div>
      <el-button style="margin-top: 20px;" @click="loginout">退出登录</el-button>
   </div>
    
 </template>
<script>
import { getQRcode } from '@/api/api';
import QRCode from 'qrcodejs2';
export default({
   data(){
      return{
         id: '',
         qrcode: '',             // 二维码数据
         channel: 0
      }
   },
   methods:{
      async makeQRCode(){
         const params = {
            "orderNumber":this.id,
            "payChannel":Number(this.channel)
         }
         const res = await getQRcode(params);
         // 清除上一次的二维码
         if (this.$refs.qrcode) {
            this.$refs.qrcode.innerHTML = ''; // 清除二维码方法
          }
          
         let resultObj = JSON.parse(res.data.result); // 将字符串解析为对象  

          // 生成二维码(这里有个坑，一定要在 new关键字前面用 等于号，赋给一个变量，否则vue运行会报错)
          this.qrcode = new QRCode(this.$refs.qrcode, {
            width: 100,  // 二维码宽度 （不支持100%）
            height: 100, // 二维码高度（不支持100%）
            text: resultObj.codeUrl, // 后端返回的二维码地址，这里暂时写死
            render: 'canvas', // 设置渲染方式（有两种方式 table和canvas，默认是canvas）
          });
          console.log(this.qrcode);
          
         
         // this.Url = res.result.codeUrl;
      },
      loginout(){
         this.$message.success('退出成功');
         sessionStorage.setItem('shopid','');
         sessionStorage.setItem('tenantId','');
         sessionStorage.setItem('XAccessToken','');
         location.assign(sessionStorage.getItem('redirect'))
         // location.assign('http://dev.i3vsoft.com:10100/saas-dev/enterprise/#/login?redirect='+encodeURIComponent(sessionStorage.getItem('redirect'))+'&title=百思商城商家后台&productId=1772514752703082498')
      }
   }
})
</script>
<style scoped>
.QRimg{
   width: 100px;
   height: 100px;
   background-color: gainsboro;
}
</style>
